import React from "react";
import { TMap } from '@map-component/react-tmap';
const About = () => {
    const [list, setList]  =React.useState<any[]>([]);
    const [info, setInfo] = React.useState<any>({})

    React.useEffect(() =>{
        getAboutData();
    }, [])

    const getAboutData = async() =>
    {
        let result = await React.HTTP.post('/business/about');

        if(result.code == 1)
        {
            setList(result.data.list);
            setInfo(result.data.info);
        }
    }


    return (
        <>
            <link rel="stylesheet" href="/assets/css/hotel-info.css"></link>
            <React.UI.Swiper>
                {
                    list.map((item:any) =>
                    {
                        return(
                            <React.UI.Swiper.Item key={item.id}>
                                <React.UI.Image src={item.thumb_text} height={237} fit='cover' />
                            </React.UI.Swiper.Item>
                        )
                    })
                }
            </React.UI.Swiper>

            <div className="hotelinfo">
                <div className="hotelinfo_title">
                    {info.hotel_name}
                </div>
                <div className="hotelinfo_address">
                    {info.hotel_store}
                </div>
                <div className="hotelinfo_desc">
                    <div className="desc_title">简介</div>
                    <div>{info.hotel_desc}</div>
                </div>
                <div className="hotelinfo_desc">
                    <div className="desc_title">详情</div>
                    <div>{info.hotel_details}</div>
                </div>
                {/* 地图组件 */}
                <TMap
                    mapKey="TOZBZ-OU2CX-JJP4Z-7FCBV-CDDJ2-AHFQZ"
                    center={{ lat: 39.984104, lng: 116.307503 }}
                    version='1.exp'
                />
            </div>
        </>
    )
}

export default About;